<template>
<div class="tpl">
  <h4>{{info.title}}</h4>
    <p class="info">
      <span>发表时间：{{info.add_time | dateFormat}}</span>
      <span>点击了：{{info.click}}次</span>
    </p>
    <hr>
  <!-- 返回的数据里有标签，所以必须用v-html渲染 -->
    <div class="content" v-html="info.content"></div>

  <!-- 将comment子组件渲染到父组件内 -->
  <mycomment :id="this.$route.params.id"></mycomment> 

</div>
</template>


<script>
// 引入评论comment子组件 
import comment from "../common/comment.vue"

// 弹出提示框
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      info:{}
    }
  },
  created(){
    this.getNewsInfo();
  },
  methods: {
    getNewsInfo() {
      // 获取哈希值上的id --> console.log(this.$route.params);
      this.$http.get("api/getnew/"+this.$route.params.id).then(res=>{
        // console.log(res.body.message[0]);
       if(res.body.status===0) {
          this.info = res.body.message[0];
       }else {
         Toast('获取新闻详情失败！');
       }
      })
    }
  },
  components: {
    // 将comment组件注册为newsinfo组件的子组件
    mycomment:comment
  }
}
</script>


<style lang = "scss">
  .tpl {
    padding: 5px;
    .info {
      display: flex;
      justify-content: space-between;
      color: #26A2FF;
    }
    .content {
      img {
        width:100%;
      }
    }
  }


</style>